<template>
  <div id="app3">
    <header class="header">
      <div class="title">
        <!-- <router-link to="/xqda"> -->
        <img
          src="../../assets/images/01_11.png"
          alt
          class="img_zuo"
          @click="fanhui_btn"
        />
        <div class="btn-change" @click="jumpDepartment">
          <img src="@/assets/images/img-switch.png" class="img" />
          <span style="margin-left: 5px">{{
            chooseId === 0 ? "部门" : "街道"
          }}</span>
        </div>
        <div>隐患整治</div>
        <div class="btn-search" @click="search">
          <img src="@/assets/images/big.png" />
        </div>
      </div>
    </header>
    <div class="main">
      <div class="main_head">
        <span class="main_head_font">隐患总数{{totalCount}}个</span>
        <div class="column-box-title">
          <img
            src="@/assets/images/appa_r.png"
            class="img img-ts"
            @click="clickDate(1)"
          />
          <div
            class="column-box-title"
            @click="show === false ? (show = true) : (show = false)"
          >
            <span
              style="margin-left: 5px"
              :style="timeType === 1 ? 'margin-right: 5px' : ''"
              >{{ years }}</span
            >
            <span
              v-if="timeType === 2"
              :style="timeType === 2 ? 'margin-right: 5px' : ''"
              >.{{ year }}</span
            >
            <img src="@/assets/images/app_x.png" class="imgs" />
          </div>
          <img
            src="@/assets/images/appa_r.png"
            class="img"
            @click="clickDate(2)"
          />
        </div>
      </div>
      <div class="titles-modal" v-if="show" @click="show = false">
        <div class="titles-box">
          <div class="titles-tu"></div>
          <div class="titles-text" @click="clickBounceds(1)">年</div>
          <div class="titles-text" @click="clickBounceds(2)">月</div>
        </div>
      </div>
      <div class="main_center">
        <div class="main_center_item">
          <div class="lefttomm">
            <div
              class="su_prent"
              @click="toTypeList(data_bzt[0].name, 2)"
              data-type="1"
            >
              <span class="su su_1"></span>
              <span class="font_42">{{ data_bzt[0].name }}</span>
            </div>
            <div class="font_36_huise">
              {{ data_bzt[0].value }}%({{ data_bzt[0].cunt }}个)
            </div>
          </div>
          <div class="lefttomm">
            <div class="su_prent" @click="toTypeList(data_bzt[1].name, 1)">
              <span class="su su_3"></span>
              <span class="font_42">{{ data_bzt[1].name }}</span>
            </div>
            <div class="font_36_huise">
              {{ data_bzt[1].value }}%({{ data_bzt[1].cunt }}个)
            </div>
          </div>
          <div class="lefttomm">
            <div class="su_prent" @click="toTypeList(data_bzt[4].name, 5)">
              <span class="su su_8"></span>
              <span class="font_42">{{ data_bzt[4].name }}</span>
            </div>
            <div class="font_36_huise">
              {{ data_bzt[4].value }}%({{ data_bzt[4].cunt }}个)
            </div>
          </div>
        </div>
        <div id="bingtu" ref="bingtu"></div>
        <div class="main_center_item">
          <div>
            <div class="su_prent" @click="toTypeList(data_bzt[2].name, 3)">
              <span class="su su_2"></span>
              <span class="font_42">{{ data_bzt[2].name }}</span>
            </div>
            <div class="font_36_huise">
              {{ data_bzt[2].value }}%({{ data_bzt[2].cunt }}个)
            </div>
          </div>
          <div>
            <div class="su_prent" @click="toTypeList(data_bzt[3].name, 4)">
              <span class="su su_9"></span>
              <span class="font_42">{{ data_bzt[3].name }}</span>
            </div>
            <div class="font_36_huise">
              {{ data_bzt[3].value }}%({{ data_bzt[3].cunt }}个)
            </div>
          </div>
        </div>
      </div>
      <div class="hr_s">
        <div class="hr"></div>
      </div>
      <div class="main_fool">
        <!-- 左边统计图 -->
        <div>
          <div class="main_fool_title">
            <span>隐患走势</span>

            <div class="main_fool_title_right">
              <div class="yzg_icon">
                <div></div>
                <span>&nbsp;隐患总数</span>
              </div>
              <div class="yh_icon">
                <div></div>
                <span>&nbsp;未整改数</span>
              </div>
            </div>
          </div>
          <div class="yhzs_prent">
            <div id="zz_tu" ref="zz_tu"></div>
          </div>
        </div>
        <div class="main_fool_su"></div>
        <div>
          <div class="main_fool_title">隐患统计</div>
          <div class="tongji">
            <div id="bingtu" ref="bingtu2"></div>
            <div class="main_title_seif" style="display: block; width: 50%">
              <div>
                <div
                  class="su_prent"
                  @click="toTypeLists(data_bzts[0].name, 1)"
                >
                  <span class="su su_5"></span>
                  <span class="font_43">{{ data_bzts[0].name }}</span>
                </div>
                <div class="font_shuzi">
                  {{ data_bzts[0].value }}%({{ data_bzts[0].cunt }}个)
                </div>
              </div>

              <div>
                <div
                  class="su_prent"
                  @click="toTypeLists(data_bzts[1].name, 2)"
                >
                  <span class="su su_6"></span>
                  <span class="font_43">{{ data_bzts[1].name }}</span>
                </div>
                <div class="font_shuzi">
                  {{ data_bzts[1].value }}%({{ data_bzts[1].cunt }}个)
                </div>
              </div>

              <div>
                <div
                  class="su_prent"
                  @click="toTypeLists(data_bzts[2].name, 3)"
                >
                  <span class="su su_7"></span>
                  <span class="font_43">{{ data_bzts[2].name }}</span>
                </div>
                <div class="font_shuzi">
                  {{ data_bzts[2].value }}%({{ data_bzts[2].cunt }}个)
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="hr_s">
        <div class="hr"></div>
      </div>

      <div>
        <div class="main_footer">
          <div class="main-list">
            <div class="main-wh">街道</div>
            <div class="main-wh sd">隐患数</div>
            <div class="main-wh sd">已整改</div>
            <div class="main-wh sd">落实管控</div>
            <div class="main-wh sd">未整改</div>
          </div>
        </div>
        <div class="index">
          <div class="main-list">
            <div class="main-wh">合计</div>
            <div class="main-wh wh-col">{{ this.total.yhNum }}</div>
            <div class="main-wh wh-col">{{ this.total.yzg }}</div>
            <div class="main-wh wh-col">{{ this.total.lsgk }}</div>
            <div class="main-wh wh-col">{{ this.total.wzg }}</div>
          </div>
          <div class="main-list" v-for="(item, index) in dataList" :key="index">
            <div class="main-wh">{{ item.name }}</div>
            <div class="main-wh wh-col" @click="dj(item.id, 1)">
              {{ item.yhNum }}
            </div>
            <div class="main-wh wh-col" @click="dj(item.id, 2)">
              {{ item.yzg }}
            </div>
            <div class="main-wh wh-col" @click="dj(item.id, 3)">
              {{ item.lsgk }}
            </div>
            <div class="main-wh wh-col" @click="dj(item.id, 4)">
              {{ item.wzg }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import { Dialog } from "vant";
import Tabbar from "../tabbar.vue";
import echarts from "echarts";
export default {
  name: "yhzz_btn",
  data() {
    return {
      menuFlag: false,
      userId: null,
      items: [],
      data_bzt: [
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
      ],
      data_bzts: [
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
        { name: "", value: "" },
      ],
      data_zxt: [],
      data_zxt_month: [],
      data_zxt_value: [],
      data_zzt: [],
      dwId: "",
      show: false,
      year: new Date().getMonth() + 1,
      years: new Date().getUTCFullYear(),
      timeType: 1,
      qx: "",
      chooseId: 0,
      typess: 0, //0街道 1 部门
      data_zzt_month: [],
      data_zzt_value: [],
      data_zzt_value1: [],
      list_id: "",
      count_hu: null,
      ym_title: "渝中区住改非",
      is_jd: false,
      list_path_canshu: [],
      ct_cunt: 0,
      sehqu_id: null,
      dataList: [],
      dwId: "",
      lev: "",
      total: "",
      tel: "",
      phone: "",
      rows: "",
      Type: 0,
      totalCount:'',
      datax: null,
    };
  },
  components: {
    Tabbar,
  },
  methods: {
    fanhui_btn() {
      this.$router.back();
    },
    search() {
      this.$router.push({ path: "/yhzz_search" });
    },
    clickBounceds(id) {
      this.show = false;

      this.count = 0;
      switch (id) {
        case 1:
          this.timeType = 1;
          
          break;
        case 2:
          this.timeType = 2;
         
          break;
      }
      this.queryAll();
    },
    //  减少/增加月份或年份
    clickDate(id) {
      let that = this;
      if (id === 1) {
        switch (that.timeType) {
          case 1:
            if (that.years > 2015) {
              that.years--;
              this.queryAll();
            }
            break;
          case 2:
            if (that.years > 2015) {
              that.year--;
              if (that.year <= 0) {
                that.years--;
                that.year = 12;
              }

              this.queryAll();
            } else {
              if (this.year > 1) {
                that.year--;

                this.queryAll();
              }
            }
            break;
        }
      } else {
        switch (that.timeType) {
          case 1:
            if (that.years < new Date().getUTCFullYear()) {
              that.years++;
              this.queryAll();
            }
            break;
          case 2:
            if (that.years < new Date().getUTCFullYear()) {
              if (that.year >= 12) {
                that.year++;
                that.years++;
                that.year = 1;
              } else {
                that.year++;
              }
              this.queryAll();
            } else {
              if (that.year !== new Date().getMonth() + 1) {
                that.year++;
                //that.queryAll();
                this.queryAll();
              }
            }
            break;
        }
      }
    },
    //  存日期
    saveTime() {
  //     if(this.timeType == 1){
  //  let time = {
  // //  year :this.year,
  //       years: this.years,
  //       chooseId: this.chooseId,
  //       timeType: this.timeType,
  //     };
  //     sessionStorage.setItem("time", JSON.stringify(time));
  //     }else if(this.timeType !==1 ){
         let time = {
    
        years: this.years,
        chooseId: this.chooseId,
        timeType: this.timeType,
      };
       if (this.timeType !== 1) {
  time.year=this.year;
       }
      sessionStorage.setItem("time", JSON.stringify(time));
   
   
    },
    //  切换部门
    jumpDepartment() {
      this.chooseId = this.chooseId === 0 ? 1 : 0;
      sessionStorage.setItem("isbenji",this.chooseId)
      // this.typess=this.typess === 0 ? 1 : 0;
      // this.query();
      this.queryAll();
    },
    //第一个饼状图
    info(params) {
      //获取数据
      try {
        plus.nativeUI.showWaiting("正在加载...");
      } catch (e) {
        console.log("plus问题");
      }

      // serId=${}&year=${}&month=${}&type=${}
      this.axios
        .get(`${this.$global_msg.Url.host}/remediaHiddenDangers/archivesType`, {
          params,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            console.log("第一个饼状图", res);
this.totalCount=res.data.rows.totalCount
            let a = [];

            // 饼状图
            a.push({
              name: "建筑物",
              value: res.data.rows.construction,
              cunt: res.data.rows.constructionCount,
            });
            a.push({
              name: "九小门店",
              value: res.data.rows.nineSmallStores,
              cunt: res.data.rows.nineSmallStoresCount,
            });
            a.push({
              name: "住改非",
              value: res.data.rows.zgf,
              cunt: res.data.rows.zgfCount,
            });
            a.push({
              name: "企业",
              value: res.data.rows.company,
              cunt: res.data.rows.companyCount,
            });
            a.push({
              name: "其他",
              value: res.data.rows.other,
              cunt: res.data.rows.otherCount,
            });
            this.data_bzt = a;
            
            console.log(this.data_bzt);
            this.bingzhangtu();

            this.ym_title = "渝中区住改非";
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
          } else {
            this.$toast("服务器数据异常!");
          }
        })
        .catch((error) => {
          this.$terminal._error(error);
        });
      // .catch(function (error) {
      //     console.log(error);
      //     plus.nativeUI.closeWaiting();

      // });
    },
    // 第二个饼状图
    info2(params) {
      this.axios
        .get(
          // `${this.$global_msg.Url.host}/selectStatistics?userId=${this.userId}`

          `${this.$global_msg.Url.host}/remediaHiddenDangers/dangerTypeCount`,
          { params }
        )
        .then((res) => {
          console.log("第二个饼状图", res);

          if (res.data.code == 200) {
            // console.log(res.data.obj.construction)

            let a = [];

            // 饼状图
            a.push({
              name: "限期整改",
              value: res.data.rows.timeLimit,
              cunt: res.data.rows.timeLimitNumber,
            });
            a.push({
              name: "即查即改",
              value: res.data.rows.iETheChange,
              cunt: res.data.rows.iETheChangeNumber,
            });
            a.push({
              name: "落实管控",
              value: res.data.rows.supervise,
              cunt: res.data.rows.superviseNumber,
            });

            this.data_bzts = a;
            console.log(this.data_bzts);
            this.bingzhangtu2();

            this.ym_title = "渝中区住改非";
            try {
              plus.nativeUI.closeWaiting();
            } catch (e) {
              console.log("plus问题");
            }
          } else {
            this.$toast("服务器数据异常!");
          }
        })
        .catch((error) => {
          this.$terminal._error(error);
        });
    },

    // 柱状图
    zhuzhuang(params) {
      this.axios
        .get(`${this.$global_msg.Url.host}/remediaHiddenDangers/dangerTrend`, {
          params,
        })
        .then((res) => {
          console.log("柱状图", res);

          if (res.data.code == 200) {
            this.data_zxt_month = [];
            this.data_zxt_value = [];
            this.data_zzt_month = [];
            this.data_zzt_value = [];
            this.data_zzt_value1 = [];

            if(res.data.rows.yhTotal.length>12){//日
              this.datax=[]
              res.data.rows.yhTotal.forEach(element => {
                  this.datax.push(element.time+"日")
              });
            }else{//月
               this.datax = [
                "1月",
                "2月",
                "3月",
                "4月",
                "5月",
                "6月",
                "7月",
                "8月",
                "9月",
                "10月",
                "11月",
                "12月",
              ];
            }   




            // 柱状图
            var yh = res.data.rows.yhTotal; //隐患
            var zg = res.data.rows.notRectify; //整改
            yh.forEach((element) => {
              element["value"] = element.num;
            });
            zg.forEach((element) => {
              element["value"] = element.num;
            });
            this.data_zzt_value = yh;
            this.data_zzt_value1 = zg;

            this.zhuzhuangtu();
          } else {
            this.$toast("服务器数据异常!");
          }
        })
        .catch((error) => {
          this.$terminal._error(error);
        });
    },

    // 底部列表

    liebiao(params) {
      this.axios
        .get(`${this.$global_msg.Url.host}/remediaHiddenDangers/dwList`, {
          params,
        })
        .then((res) => {
          console.log("列表", res);
          if (res.data.code == 200) {
            this.dataList = res.data.rows.list;
            this.total = res.data.rows.total;
          } else {
            this.$toast("服务器数据异常!");
          }
        })
        .catch((error) => {
          this.$terminal._error(error);
        });
    },

    activated: function () {
      this.liebiao();
    },

    dj(i, num, e, name) {
      this.saveTime();
      var yhzz_params = {
        type: num,
        sqid: i,
      };
      var quji={
        shequid:i,
         type: num,
      }
 localStorage.setItem("yhzz", JSON.stringify(quji));
      localStorage.setItem("yhzz_p", JSON.stringify(yhzz_params));
      var yhzz_params = {
        cx_type: "xqda",
        type: num,
        from: "/yhzz_btn",
        sqid: i,
      };
      var quji={
        shequid:i,
         type: num,
      }
 localStorage.setItem("yhzz", JSON.stringify(quji));
      localStorage.setItem("yhzz_params", JSON.stringify(yhzz_params));
      var types = localStorage.getItem("yhzz_p")
        ? JSON.parse(localStorage.getItem("yhzz_p"))
        : {};
      console.log(types.type);

      if (this.chooseId == 0) {
        this.$router.push({ path: "/yhzz_btn1", query: { userid: i } });
      } else {
        // var yhzz_params = {
        //   cx_type: "yhzz",
        //   type: num,
        //   sqid: i,
        //   from: "/yhzz_btn"
        // };

        // localStorage.setItem("yhzz_params", JSON.stringify(yhzz_params));
        var quji={
        shequid:i,
         type: num,
      }
 localStorage.setItem("yhzz", JSON.stringify(quji));
        this.$router.push({ path: "/yhzz_keshi", query: { userid: i } });
      }
    },

    toTypeList(e, num, name) {
      sessionStorage.setItem("isbenji",this.chooseId)
      this.saveTime();
      var yhzz_params = {
        cx_type: "xqda",
        type: num,
        from: "/yhzz_btn",
      };
localStorage.setItem("btn",0)
      localStorage.setItem("yhzz_params", JSON.stringify(yhzz_params));
      this.$router.push("/yhzz_list");
    },

    toTypeLists(e, num, name) {
      sessionStorage.setItem("isbenji",this.chooseId)
      this.saveTime();
      var yhzz_params = {
        cx_type: "yhlb",
        from: "/yhzz_btn",
        type: num,
      };
localStorage.setItem("btn",0)
      localStorage.setItem("yhzz_params", JSON.stringify(yhzz_params));
      this.$router.push("/yhzz_list");
    },

    bingzhangtu() {
      //饼状图
      // var myChar = echarts.init(document.getElementById("bingtu"));
      let a = this.$refs.bingtu;
      if (a) {
        let myChar = echarts.init(a);
        var option = {
          series: [
            {
              // name: '安全警示',
              type: "pie",
              radius: ["40%", "80%"],
              labelLine: {
                //不显示枝条
                show: false,
              },
              label: {
                show: false,
                position: "center",
              },
              color: ["#238BFF", "#FFD548", "#23C9FF", "#5ce042", "#007022"], //饼图颜色
              data: this.data_bzt,
            },
          ],
        };
        myChar.setOption(option);
      }
    },
    bingzhangtu2() {
      //饼状图
      // var myChar = echarts.init(document.getElementById("bingtu"));
      let a = this.$refs.bingtu2;
      if (a) {
        let myChar = echarts.init(a);
        var option = {
          series: [
            {
              // name: '安全警示',
              type: "pie",
              radius: ["40%", "80%"],
              labelLine: {
                //不显示枝条
                show: false,
              },
              label: {
                show: false,
                position: "center",
              },
              color: ["#23C9FF", "#238BFF", "#FFD548"], //饼图颜色
              data: this.data_bzts,
            },
          ],
        };
        myChar.setOption(option);
      }
    },

    zhuzhuangtu() {
      //柱状图

      let a = this.$refs.zz_tu;
      if (a) {
        let myChar = echarts.init(a);
        var option = {
          //    title:{text:'隐患走势'},
          color: ["#3398DB"],
          grid: {
            left: "2%",
            right: "5%",
            bottom: "0%",
            top: "27%",
            containLabel: true,
          },
          dataZoom: [
            {
              roam: false,
              zoomOnMouseWheel: false,
              type: "inside",
              xAxisIndex: [0],
                //start:1,

               //end:12,
               start: this.dateLocation().start,

               end: this.dateLocation().end,
            },
          ],

          xAxis: [
            {
              type: "category",

              // data: xData,
              data: this.datax,
              axisTick: {
                show: false, //取消刻度尺
              },
              axisLabel: {
                show: true,

                interval: 0, //设置间隔
                textStyle: {
                  color: "#535353", //字体颜色,
                  fontSize: 12,
                },
              },
              axisLine: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              name: "",
              type: "value",

              splitLine: {
                // show: false//隐藏横线
                lineStyle: {
                  color: "#DFDFDF",
                  width: 2,
                },
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#535353", //字体颜色
                  fontSize: 12,
                },
              },
              axisTick: {
                show: false, //取消刻度尺
              },
              axisLine: {
                show: false, //取消刻度尺
              },
            },
          ],

          series: [
            {
              // name: '直接访问',
              color: "#ffd548",
              type: "bar",
              barWidth: "20%",
              data: this.data_zzt_value, //已整改
            },
            {
              // name: '直接访问',
              color: "red",
              type: "bar",
              // barGap: 0,
              barWidth: "20%",
              data: this.data_zzt_value1, //隐患数
            },
            // {
            //   // name: '直接访问',
            //   color: "#3f98fd",
            //   type: "bar",
            //   barWidth: "20%",
            //   data: this.data_zzt_value2 //整改
            // }
          ],
        };
        myChar.setOption(option);
      }
    },
    sequence(a, b) {
      //排序
      if (a.id > b.id) {
        return -1;
      } else if (a.id < b.id) {
        return 1;
      } else {
        return 0;
      }
    },
    ditu_btn() {
      var xqda_params = {
        path: "/tj_tu_4", //列表或地图页面返回的路径
        cs_cx: {
          //列表或地图页面查询参数
          dwId: this.list_id,
          userId: this.userId,
        },
        cx_type: "zgf",
      };
      if (this.ym_title != "渝中区住改非") {
        xqda_params.title = this.ym_title;
      }
      localStorage.setItem("xqda_params", JSON.stringify(xqda_params));
      sessionStorage["tongji_ct_cunt"] = this.ct_cunt;
      sessionStorage["tongji_list_path_canshu"] = JSON.stringify(
        this.list_path_canshu
      );
      this.$router.push({
        path: "/mode_map",
      });
    },
    dateLocation() {
      let month = {
        start: 0,
        end: 0,
      };
       if (this.data_zzt_value.length <= 12) {
      month.start = (100/12)*(new Date().getMonth() + 1 - 3)
      month.end = (100/12)*(new Date().getMonth() + 1)
       } else {
      month.start = (100 / 30) * new Date().getDate() + 1 - 7;
      month.end = (100 / 30) * (new Date().getDate() +1);
       }
      return month;
    },
    queryAll() {
      var params = {
        userId: this.userId,
        year: this.years,
        type: this.chooseId,
      };
      if (this.Type !== 0) {
        params.type = this.Type;
      }
      if (this.timeType !== 1) {
        params.month = this.year;
      }
      this.info(params);
      this.info2(params);
      this.zhuzhuang(params);
      this.liebiao(params);
    },
  },

  mounted() {
    // var _this = this;
    this.qx = localStorage.getItem("yhzz_quanxian");
    if (this.qx == 0) {
      this.chooseId = 0;
    } else if (this.qx == 1) {
      this.chooseId = 1;
    }

    let a = JSON.parse(sessionStorage.getItem("time"));
    if (a) {
      this.year = Number(a.year);
  
      console.log(this.year);
      console.log(this.years);
      this.years = Number(a.years);
      this.timeType = Number(a.timeType);
      this.chooseId = Number(a.chooseId);
      if (a.type) {
        this.Type = Number(a.type);
      }
        
    }
     sessionStorage.removeItem('time')
    this.queryAll();
    // sessionStorage.removeItem("time");
    console.log("页面加载", this.ct_cunt);
    if (this.ct_cunt == 2) {
      this.btn_h(
        this.list_path_canshu[1].dwId,
        this.list_path_canshu[1].count,
        this.list_path_canshu[1].name,
        this.list_path_canshu[1].lxmc
      );
    } else if (this.ct_cunt == 1) {
      this.btn_h(
        this.list_path_canshu[0].dwId,
        this.list_path_canshu[0].count,
        this.list_path_canshu[0].name,
        this.list_path_canshu[0].lxmc
      );
    } else if (this.ct_cunt == 0) {
    }
    //
  },
  created() {
    this.userId = localStorage.getItem("userId"); //获取访问id
  
    this.tel = localStorage.getItem("tel"); //获取访问id
    this.phone = localStorage.getItem("phone"); //获取访问id

    console.log(this.userId);
  },
};
</script>
<style scoped>
* {
  box-sizing: border-box;
}

.header {
  height: 1.8519rem;
  background: #007aff;
  padding-top: 0.8333rem;
  box-sizing: border-box;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 20;
  font-size: 0.388888rem;
}

.title {
  padding: 0 0.3704rem;
  display: flex;
  align-items: center;
  color: #fff;
}

.title > div {
  width: 100%;
  font-size: 0.4444rem;
  text-align: center;
}

.img_zuo {
  width: 0.2593rem;
  height: 0.463rem;
}

.btn-add {
  position: absolute;
  right: 0.37037rem;
  font-size: 1.111111rem !important;
}
.btn-search {
  position: absolute;
  right: 0.4rem;
  top: 0.2rem;
  bottom: 0;
  width: auto !important;
  height: 100%;
  display: flex;
  align-items: center;
}
.btn-search img {
  width: 0.529629rem;
  height: 0.529629rem;
}
/* 
.btn-change {
  position: absolute;
  left: 1.537037rem;
  font-size: 0.388888rem;
  bottom: 0.444444rem;
} */
.btn-change {
  position: absolute;
  left: 1.537037rem;
  top: 0.2rem;
  font-size: 0.388888rem !important;
  bottom: 0;
  width: auto !important;
  height: 100%;
  display: flex;
  align-items: center;
}
.btn-change img {
  width: 0.529629rem;
  height: 0.529629rem;
}
/*  */
.titles-box {
  position: fixed;
  top: 2.777778rem;
  right: 0.462963rem;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 0.740741rem;
  border-radius: 0.185185rem;
  background-color: #ffffff;
  max-height: 4.5rem;
}
.titles-boxs {
  top: 1.877778rem;
  right: 0.162963rem;
  padding: 0.2rem 0.340741rem;
}
.titles-tu {
  position: absolute;
  width: 0.37037rem;
  height: 0.37037rem;
  background-color: #ffffff;
  transform: rotate(45deg);
  top: -0.138889rem;
  right: 0.277778rem;
}
.titles-text-box {
  overflow: hidden;
  overflow-y: auto;
}
.titles-text {
  padding: 0.185185rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.titles-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  z-index: 999;
}
.column-box-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.img {
  width: 0.529629rem;
  height: 0.529629rem;
}
.imgs {
  width: 0.329629rem;
  height: 0.329629rem;
}
.img-ts {
  transform: rotate(180deg);
}
.main {
  padding-top: 1.8519rem;
  /* height: 100vh; */
  box-sizing: border-box;
  background: #fff;
  padding-bottom: 1.6667rem;
  /* padding-top: 10.0008px; */
}

.main_head {
  height: 1.3889rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3704rem;
}

.img_dt {
  width: 0.3148rem;
  height: 0.4259rem;
  margin-right: 0.0556rem;
}
.lefttomm {
  padding-bottom: 0.4rem;
}
.main_head_ditu {
  display: flex;
  align-items: center;
  color: #4568ff;
  font-size: 0.3889rem;
  margin-right: 0.3704rem;
}

.main_head_font {
  font-size: 0.4444rem;
  font-weight: 400;
}

.font_36 {
  font-size: 0.3333rem;
}

.font_36_huise {
  font-size: 0.3333rem;
  color: #8e8e8e;
  margin-top: 0.1852rem;
  width: 100%;
  padding-left: 0.5rem;
}

.font_42 {
  font-size: 0.3889rem;
}
.font_43 {
  font-size: 0.3189rem;
}

/* 圆饼图 */
.main_center {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 2rem;
}

.main_center > div.main_center_item {
  width: 3.3333rem;
  height: 3.3333rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;
  padding: 0.3704rem 0;
  padding-left: 0.7407rem;
  box-sizing: border-box;
}

#bingtu {
  width: 3.3333rem;
  height: 3.3333rem;
}

.main_center_fool {
  width: 100%;
  display: flex;
}

.main_center_fool > div {
  width: 3.3333rem;
  height: 1.6667rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 0.7407rem;
}

.su {
  width: 0.1296rem;
  height: 0.463rem;
  border-radius: 1.8519rem;
  background: #238bff;
  display: inline-block;
  margin-right: 0.2704rem;
}

.su_1 {
  background: #238bff;
}

.su_2 {
  background: #23c9ff;
}

.su_3 {
  background: #ffd548;
}

.su_4 {
  background: #7264f9;
}

.su_5 {
  background: #23c9ff;
}
.su_6 {
  background: #238bff;
}

.su_7 {
  background: #ffd548;
}

.su_prent {
  display: flex;
  align-items: center;
}

.hr_s {
  padding: 0 0.3704rem;
}
.su_8 {
  background: #007022;
}

.su_9 {
  background: #5ce042;
}

.hr {
  width: 100%;
  height: 0.3704rem;
  background: #f7f7f7;
  box-sizing: border-box;
}

/* 折线图 柱张图 */
.main_fool {
  width: 100%;
  height: 4.4444rem;
  padding: 0 0.3704rem;
  display: flex;
  box-sizing: border-box;
  /* align-items: center; */
  justify-content: space-between;
  padding-top: 0.148148rem;
}

.yhzs_prent {
  width: 4.296rem;
  height: 3.5185rem;
  overflow-x: auto;
  /* padding-right: 0.1852rem; */
}

#zx_tu {
  width: 9.2593rem;
  height: 3.5185rem;
}

.main_fool > div {
  width: 48%;
}

.main_fool_title {
  font-size: 0.3889rem;
  font-weight: 400;
  /* margin-top: 0.2593rem; */
  /* margin-left: 5%; */
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
}
.main_fool_title_right {
  /* display: flex; */
  align-items: center;
}

.yh_icon,
.yzg_icon {
  display: flex;
  align-items: center;
}
.yh_icon > span,
.yzg_icon > span {
  font-size: 0.2222rem;
  font-weight: 400;
}

.yh_icon > div:first-child {
  width: 0.3704rem;
  height: 0.1481rem;
  background: red;
}
.yzg_icon > div:first-child {
  width: 0.3704rem;
  height: 0.1481rem;
  background: #ffd548;
}

/* 柱状图 */
.xcpc_prent {
  width: 4.296rem;
  height: 3.5185rem;
  /* overflow-x: auto; */
  /* padding-right: 0.1852rem; */
}

#zz_tu {
  width: 100%;
  height: 3.5185rem;
}

.main_fool_su {
  width: 1px !important;
  height: 3.6111rem;
  border-right: 1px solid #ddd;
}

.mian_list {
  width: 100%;
  display: flex;
  padding: 0.2778rem 0;
  flex-wrap: wrap;
}

.mian_list > div {
  width: 50%;
  padding-left: 0.3704rem;
  padding-right: 0.1852rem;
  box-sizing: border-box;
  border-right: 1px solid #ddd;
}

.mian_list > div:nth-child(2n) {
  border-right: none;
  padding-left: 0.1852rem;
}

.item {
  display: flex;
  justify-content: space-between;
  padding-left: 0.3704rem;
  padding-right: 0.1852rem;
  box-sizing: border-box;
  border-bottom: 1px solid #ddd;
  /* border-top: 1Px solid #ddd; */
  margin-bottom: -1px;
  height: 1.3889rem;
  align-items: center;
}

.item > div {
  font-size: 0.3333rem;
}

.item_active {
  border: none;
}
.tongji {
  display: flex;
}
.font_shuzi {
  font-size: 0.31rem;

  color: #8e8e8e;
  margin-top: 0.1852rem;
  width: 100%;
  /* padding-left: 0.5rem; */
}
.yh_zts {
  display: flex;
}
/* 底部列表 */
.main_footer {
  /* position: fixed; */
  width: 100%;
  background-color: #fff;
  z-index: 999;
}
.main-list {
  display: flex;
  justify-content: space-around;
  padding-top: 0.425926rem;
  padding-bottom: 0.425926rem;
  border-bottom: 1px solid #aaaaaa;
}

/* .index {
    padding-top: 0.8rem;
  } */

.main-wh {
  width: 20%;
  text-align: center;
  color: #666666;
  font-size: 0.388888rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wh-col {
  color: #748bfd;
}
.sd {
  color: #666666;
}
</style>
